import React from "react";
import { Space, DatePicker, Form } from "antd";
import TheButton from "@/components/TheButton";
import { getDateTime3 } from "@/utils/getDate";
import _ from 'lodash'

const { RangePicker } = DatePicker;

class Header extends React.Component {
  state = {
    type: "",
    defaultDate: []
  };
  pickerChange = (moment) => {
    if (_.isEmpty(moment)) {
      this.setState({
        type: 'day'
      }, () => {
        this.props.getTime('day')
      })
    } else {
      let createStartTime = getDateTime3(moment[0]) + ' 00:00:00';
      let createEndTime = getDateTime3(moment[1]) + ' 23:59:59';
      this.setState({
        type: 'condition'
      }, () => {
        this.props.getTime("condition", createStartTime, createEndTime);
      })
    }
  };
  btnChange = (type) => {
    this.setState({ type }, () => {
      this.formRef.setFieldsValue({ date: [] })
      this.props.getTime(type);
    });
  };
  render() {
    const { defaultDate } = this.state
    return (
      <div className="p-search-box statics-header">
        <Space size={"large"}>
          <Form ref={ref => this.formRef = ref} layout="inline">
            <Form.Item name='date' label="选择时间">
              <RangePicker defaultPickerValue={defaultDate} onChange={this.pickerChange} />
            </Form.Item>
          </Form>
          <TheButton type="primary" onClick={() => this.btnChange("day")} ghost>
            本日
          </TheButton>
          <TheButton
            type="primary"
            onClick={() => this.btnChange("week")}
            ghost
          >
            本周
          </TheButton>
          <TheButton
            type="primary"
            onClick={() => this.btnChange("month")}
            ghost
          >
            本月
          </TheButton>
          <TheButton
            type="primary"
            onClick={() => this.btnChange("year")}
            ghost
          >
            本年
          </TheButton>
        </Space>
      </div>
    );
  }
}

export default Header;
